<template>
    <div class="loading3">
        <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</template>
<style lang="less" scoped>
.loading3{
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .circle{
        width: 120px;
        display: flex;
        span{
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgb(245, 179, 220);
            animation: load 2s ease infinite;
        }
        span:nth-child(2){
            background: rgb(179, 245, 220);
            animation-delay: 0.4s;
        }
        span:nth-child(3){
            background: rgb(179, 221, 245);
            animation-delay: 0.8s;
        }
        span:nth-child(4){
            background: rgb(245, 230, 179);
            animation-delay: 1.2s;
        }
        span:nth-child(5){
            background: rgb(179, 197, 245);
            animation-delay: 1.6s;
        }
    }
}
@keyframes load {
    0%,100%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.6);
        opacity: 0.3;
    }
}
</style>